<template>
  <div class="floors">
    <!-- snack休闲食品 -->
    <!-- <div class="floor1">
      <div class="floor1_t">{{floorName.floor1}}</div>
      <van-grid :column-num="2">
        <van-grid-item v-for="item of floor1" :key="item.goodsId">
          <router-link :to="{path:'/details',query:{id:item.goodsId}}">
            <van-image :src="$filterImage(item.image)" />
          </router-link>
        </van-grid-item>
      </van-grid>
    </div>-->
    <!-- freshfruit新鲜水果 -->
    <!-- <div class="floor2">
      <div class="floor2_t">{{floorName.floor2}}</div>
      <van-grid :column-num="2">
        <van-grid-item v-for="item of floor2" :key="item.goodsId">
          <router-link :to="{path:'/details',query:{id:item.goodsId}}">
            <van-image :src="$filterImage(item.image)" />
          </router-link>
        </van-grid-item>
      </van-grid>
    </div>-->
    <!-- Nutritious dairy products营养奶品 -->
    <!-- <div class="floor3">
      <div class="floor3_t">{{floorName.floor3}}</div>
      <van-grid :column-num="2">
        <van-grid-item v-for="item of floor3" :key="item.goodsId">
          <router-link :to="{path:'/details',query:{id:item.goodsId}}">
            <van-image :src="$filterImage(item.image)" />
          </router-link>
        </van-grid-item>
      </van-grid>
    </div>-->

    <!-- snack休闲食品floor1 -->
    <div class="floors-item">
      <h2 v-if="homeData.floorName">
        {{homeData.floorName.floor1}}
      </h2>
      <div class="content">
        <ul class="clearFix">
          <li v-for="item of homeData.floor1" :key="item.goodsId">
            <router-link :to="{path:'/details',query:{id:item.goodsId}}">
              <van-image class="image" :src="$filterImage(item.image)" lazy-load>
                <template>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- freshfruit新鲜水果floor2 -->
    <div class="floors-item">
      <h2 v-if="homeData.floorName">
        {{homeData.floorName.floor2}}
      </h2>
      <div class="content">
        <ul class="clearFix">
          <li v-for="item of homeData.floor2" :key="item.goodsId">
            <router-link :to="{path:'/details',query:{id:item.goodsId}}">
              <van-image class="image" :src="$filterImage(item.image)" lazy-load>
                <template>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- Nutritious dairy products营养奶品floor3 -->
    <div class="floors-item">
      <h2 v-if="homeData.floorName">
        {{homeData.floorName.floor3}}
      </h2>
      <div class="content">
        <ul class="clearFix">
          <li v-for="item of homeData.floor3" :key="item.goodsId">
            <router-link :to="{path:'/details',query:{id:item.goodsId}}">
              <van-image class="image" :src="$filterImage(item.image)" lazy-load>
                <template>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // return {
    //   floorName: "",
    //   floor1: [],
    //   floor2: [],
    //   floor3: []
    // };
    return{
      homeData:{}
    }
  },
  created() {
    this.$eventBus.$on("getIndexInfo", res => {
      //console.log(res);
      // this.floorName = res.floorName;
      // this.floor1 = res.floor1;
      // this.floor2 = res.floor2;
      // this.floor3 = res.floor3;
      this.homeData = res
    });
  }
};
</script>

<style lang="scss">
@import "@/style/home/floors.scss"
// .floor1,
// .floor2,
// .floor3 {
//   margin-top: 4px;
// }
// .floor1_t,
// .floor2_t,
// .floor3_t {
//   text-align: center;
//   font-size: 20px;
// }
</style>